<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <!-- 表格组件 -->
    <BasicTable @register="registerTable" class="w-full">
      <!-- 顶部工具栏 -->
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">新增通道</a-button>
      </template>

      <!-- 表格操作列 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                icon: 'ant-design:edit-filled',
                tooltip: '设备绑定',
                onClick: handleBindDevice.bind(null, record),
              },
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                tooltip: '删除通道',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>

    <!-- 新增通道模态框 -->
    <SipModal @register="registerSipModal" @success="handleSuccess" />
    <!-- 设备绑定模态框 -->
    <BindingModal @register="registerBindingModal" @success="handleSuccess" />
  </PageWrapper>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getSipList } from '/@/api/demo/video';
  import { PageWrapper } from '/@/components/Page';
  import { useModal } from '/@/components/Modal';
  import SipModal from './SipModal.vue';
  import BindingModal from './BindingModal.vue';
  import { columns, searchFormSchema } from './sip.data';

  export default defineComponent({
    name: 'SipManagement',
    components: { BasicTable, PageWrapper, SipModal, BindingModal, TableAction },
    setup() {
      // 两个模态框独立注册
      const [registerSipModal, { openModal: openSipModal }] = useModal();
      const [registerBindingModal, { openModal: openBindingModal }] = useModal();

      const searchInfo = reactive<Recordable>({});
      const [registerTable, { reload, updateTableDataRecord }] = useTable({
        title: '通道列表',
        api: getSipList,
        rowKey: 'id',
        columns,
        formConfig: {
          labelWidth: 120,
          schemas: searchFormSchema,
          autoSubmitOnEnter: true,
        },
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        handleSearchInfoFn(info) {
          console.log('handleSearchInfoFn', info);
          return info;
        },
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
        },
      });

      // 新增通道
      function handleCreate() {
        openSipModal(true, {
          title: '新增通道',
          isUpdate: false,
        });
      }

      // 设备绑定
      function handleBindDevice(record) {
        openBindingModal(true, {
          title: '监控设备绑定',
          record, // 传递选中的记录信息
        });
      }

      function handleDelete(record: Recordable) {
        console.log('删除通道:', record);
      }

      function handleSuccess({ isUpdate, values }) {
        if (isUpdate) {
          const result = updateTableDataRecord(values.id, values);
          console.log('更新结果:', result);
        } else {
          reload();
        }
      }

      return {
        registerTable,
        registerSipModal,
        registerBindingModal,
        handleCreate,
        handleDelete,
        handleSuccess,
        handleBindDevice,
        searchInfo,
      };
    },
  });
</script>
